<template>
  <div class="page-wrapper">
    <div class="header-wrapper">
      <h2 class="top">
        <van-icon class="back-icon" name="arrow-left" size="30px" @click="goBack" />
        <span class="title-text">慢病护理</span>
      </h2>
    </div>
    <div class="article-list-container">
      <div
          v-for="article in articles"
          :key="article.id"
          class="article-item"
          @click="goToDetails(article)"
      >
        <div class="article-content-wrapper">
          <div class="article-title">
            <span class="article-title-text">{{ article.title }}</span>
          </div>
          <div class="article-text">
            <p :class="{ 'ellipsis - text': article.content.length > maxChars }">
              {{ getDisplayContent(article.content) }}
            </p>
          </div>
        </div>
        <div class="article-image">
          <div class="article-image-block">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.YhdOuoXmIUGUBSRSDLGXrwHaHa?rs=1&pid=ImgDetMain" alt="文章图片" />
          </div>
        </div>
      </div>
    </div>
    <van-loading size="24px" style="margin-left: 150px">加载中...</van-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        {
          // title: '怎么守护自己的肠道健康?',
          // content: '长时间吃动不平衡，还会增加超重、肥胖，进而增加三高的患病风险...',
          // imageUrl: ''
        },
      ],
      maxChars: 29 // 设置最多显示的字符数，可按需调整
    };
  },
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    findLentivirusList() {
      this.axios.get('http://localhost:10086/api/doctor/healthInfoArticle/findLentivirusList').then(res => {
        console.log(res);
        this.articles = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    goToDetails(article) {
      // 传递文章的 id 到详情页
      console.log('跳转到详情页', article);
      this.$router.push({
        name: 'chronicNursing',
        params: {id: article.id} // 传递 id 参数
      });
    },
    getDisplayContent(content) {
      if (content.length > this.maxChars) {
        return content.slice(0, this.maxChars) + '...';
      }
      return content;
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      }, 666);
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
    this.findLentivirusList();
  }
};
</script>

<style scoped>
.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

.article-list-container {
  width: 80%;
  margin: 0 auto;
}

.article-item {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 20px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
}

.article-content-wrapper {
  flex: 1;
}

.article-title {
  margin-bottom: 5px; /* 减少标题与下方文字的间距 */
}

.article-title-text {
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap; /* 让标题一行显示 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-text {
  overflow: hidden;
}

.article-text p {
  font-size: 12px;
  color: gray;
}

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-image {
  width: 100px;
  height: 80px;
  margin-left: 20px;
}

.article-image-block {
  //background-color: red;
  width: 100%;
  height: 100%;
}

img {
  //background-color: red;
  width: 100%;
  height: 100%;
}
</style>